<template>
  <div>
    <van-cell class="comment-item">
      <van-image slot="icon" class="avatar" round fit="cover" :src="comment.aut_photo"/>
      <div slot="title" class="title-wrap">
        <div class="user-name">{{ comment.aut_name }}</div>
        <van-button
          class="like-btn"
          :class="{
          liked: comment.is_liking
        }"
          :icon="comment.is_liking ? 'good-job' : 'good-job-o'"
          @click="onCommentLike"
        >{{ comment.like_count || '赞' }}</van-button>
      </div>

      <div slot="label">
        <p class="comment-content">{{ comment.content }}</p>
        <div class="bottom-info">
          <van-button lass="reply-btn" round @click="reply">{{ comment.reply_count }} 回复 ></van-button>
          <span class="comment-pubdate">{{ timestamp2fromNow(comment.pubdate) }}</span>
        </div>
      </div>
      <!-- 评论回复弹出层 -->
      <van-popup
        class="replyPopup"
        v-model="showComment"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        position="bottom"
        :style="{ height: '92%' }"
      >
        <div class="scroll-wrap">
          <van-cell>
            <template #title class="right">
              <span class="custom-title">{{comment.reply_count}}条回复</span>
            </template>
          </van-cell>
        </div>
        <van-cell>
          <van-image slot="icon" class="avatar" round fit="cover" :src="comment.aut_photo"/>
          <div slot="title" class="title-wrap">
            <div class="user-name">{{ comment.aut_name }}</div>
            <span>关注</span>
          </div>
          <div slot="label">
            <p class="comment-content">{{ comment.content }}</p>
            <div class="bottom-info">
              <span class="comment-pubdate">{{ timestamp2fromNow(comment.pubdate) }}</span>
              <van-button
                class="like-btn"
                :class="{
          liked: comment.is_liking
        }"
                :icon="comment.is_liking ? 'good-job' : 'good-job-o'"
                @click="onCommentLike"
              >{{ comment.like_count || '赞' }}</van-button>
            </div>
          </div>
        </van-cell>
        <div class="allReply">全部回复</div>

        <van-cell v-for="(item, i) in list" :key="i">
          <van-image slot="icon" class="avatar" round fit="cover" :src="item.aut_photo"/>
          <div slot="title" class="title-wrap">
            <div class="user-name">{{ item.aut_name }}</div>
            <van-button
              class="like-btn"
              :class="{
          liked: item.is_liking
        }"
              :icon="item.is_liking ? 'good-job' : 'good-job-o'"
              @click="onCommentReplyLike(item)"
            >{{ item.like_count || '赞' }}</van-button>
          </div>
          <div slot="label">
            <p class="comment-content">{{ item.content }}</p>
            <div class="bottom-info">
              <span class="comment-pubdate">{{ timestamp2fromNow(item.pubdate) }}</span>
            </div>
          </div>
        </van-cell>
        <van-empty description="还没有人评论哦"/>

        <!-- 评论回复 -->
        <div class="article-bottom">
          <van-button class="comment-btn" @click="isPostShow=true" type="default" round size="small">
            <van-icon name="edit"/>写回复
          </van-button>
          <van-icon
            :color="value ? '#ffa500' : ''"
            :name="value ? 'star' : 'star-o'"
            @click="value = !value"
          />
          <van-icon name="share" color="#777777"></van-icon>
        </div>
      </van-popup>
    </van-cell>

    <!-- 评论弹窗 -->
    <van-popup v-model="isPostShow" position="bottom">
      <comment-post/>
    </van-popup>
  </div>
</template>

<script>
import moment from "moment";
import { commentLike, noCommentLike } from "@/api/comment";
import { debounce } from "@/utils/index.js";
import { getComments } from "@/api/comment.js";
import CommentPost from "./comment-post";

export default {
  name: "CommentItem",
  components: {},
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    CommentPost
  },
  data() {
    return {
      list: [],
      showComment: false,
      offset: null, // 获取下一页数据的标记
      limit: 20,
      finished: false, // 是否加载结束
      value: false,
      isPostShow: false
    };
  },
  mounted() {},
  methods: {
    async onCommentLike() {
      try {
        if (this.comment.is_liking) {
          // 已赞，取消点赞
          await noCommentLike(this.comment.com_id);
          this.comment.like_count--;
        } else {
          // 没有点赞，添加点赞
          await commentLike(this.comment.com_id);
          this.comment.like_count++;
        }
        this.comment.is_liking = !this.comment.is_liking;
      } catch (err) {
        this.$toast("操作失败，请重试");
      }
    },
    async onCommentReplyLike(item) {
      try {
        if (item.is_liking) {
          // 已赞，取消点赞
          await noCommentLike(item.com_id);
          item.like_count--;
        } else {
          // 没有点赞，添加点赞
          await commentLike(item.com_id);
          item.like_count++;
        }
        item.is_liking = !item.is_liking;
      } catch (err) {
        this.$toast("操作失败，请重试");
      }
    },
    async getReply() {
      try {
        const { data } = await getComments({
          type: "c",
          source: this.comment.com_id,
          offset: this.offset,
          limit: this.limit
        });
        // console.log(data);
        const { results } = data.data;
        this.list.push(...results);
        this.$emit("onload-success", data.data.total_count);
        //  判断是否还有数据
        if (results.length) {
          this.offset = data.data.last_id; // 更新获取下一页数据的页码
        } else {
          this.finished = true; // 没有数据了，关闭加载更多
        }
      } catch (error) {}
    },
    reply() {
      this.showComment = true;
      this.getReply();
    },
    timestamp2fromNow(timestamp) {
      return moment(timestamp).fromNow();
    }
  }
};
</script>

<style scoped lang="less">
.comment-item {
  .avatar {
    width: 72px;
    height: 72px;
    margin-right: 25px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 35px;
      color: #e5645f;
    }
    .user-name {
      color: #406599;
      font-size: 30px;
    }
    ::v-deep .van-cell__value {
      flex: 0;
    }
  }
  .comment-content {
    font-size: 32px;
    color: #222222;
    word-break: break-all;
    text-align: justify;
  }
  .comment-pubdate {
    font-size: 25px;
    color: #222;
    margin-right: 25px;
  }
  .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .reply-btn {
    // width: 135px;
    height: 48px;
    line-height: 48px;
    font-size: 25px;
    color: #222;
  }
  .like-btn {
    position: absolute;
    right: 20px;
    height: 30px;
    padding: 0;
    border: none;
    font-size: 25px;
    line-height: 30px;
    margin-right: 7px;
    .van-icon {
      font-size: 30px;
    }
    &.liked {
      color: #e5645f;
    }
  }
}
.replyPopup {
  .van-cell__title {
    text-align: center;
  }
  .allReply {
    margin: 20px;
    color: #4f4363;
    font-size: 30px;
    text-align-last: left;
  }
  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 88px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 282px;
      height: 46px;
      border: 2px solid #eeeeee;
      font-size: 30px;
      line-height: 46px;
      color: #a7a7a7;
    }
    /deep/ .van-icon {
      font-size: 40px;
      color: rgb(196, 129, 129);
      .van-info {
        font-size: 16px;
        background-color: #e22829;
      }
    }
  }
}
.scroll-wrap {
  // position: fixed;
  // top: 92px;
  // left: 0;
  // right: 0;
  // bottom: 88px;
}
</style>
